
<template>
    <div class="app-container">
        {{currentSelectedCategoryDTO}}
        <el-cascader
            v-model="currentSelectedCategoryDTO"
            :options="categoryDTOList"
            :props = "defaultProps"
            @change="categoryDTOChange">
        </el-cascader>
        <br><br>
        <div style="margin-bottom:10px;">
         <el-button type="primary" @click="openAddDialog()">新增</el-button>
        </div>

         <el-table
            :data="categoryTrademarkList"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="tmName"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="logoUrl"
                label="LOGO">
                    <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.logoUrl"></el-image>
                    </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="removeCategoryTrademark(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            {{baseCategoryTrademarkDTO}}
            <el-table
            :data="categoryNotExistTrademarkList"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="tmName"
                label="名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="logoUrl"
                label="LOGO">
                    <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.logoUrl"></el-image>
                    </template>
            </el-table-column>
        </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCategoryTrademark">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import * as categoryApi from '../../api/gmall/product/category'
import * as categoryTrademarkApi from '../../api/gmall/product/categoryTrademark'
export default {
    data(){
        return{
            currentSelectedCategoryDTO:[],
            categoryDTOList:[],
            defaultProps: {
                children: 'children',
                label: 'name',
                value:'id'
            },
            categoryTrademarkList:[],
            dialogVisible:false,
            categoryNotExistTrademarkList:[],
            categorySelectedTrademarkList:[],
            baseCategoryTrademarkDTO:{
                category3Id:-1,
                trademarkList:[]
            }
        }
    },
    methods:{
        findBaseCatgoryDTOTree(){
            categoryApi.findBaseCatgoryDTOTree().then(res=>{
                if(res.data.ok){
                    console.log(res.data.data)
                    this.categoryDTOList = res.data.data;
                }
            })
        },
        categoryDTOChange(){
            this.findBaseTrademarkListByCategory3Id()
            console.log("--------------")
            
        },
        findBaseTrademarkListByCategory3Id(){
            let category3Id = this.currentSelectedCategoryDTO[2]
            categoryTrademarkApi.findBaseTrademarkListByCategory3Id(category3Id).then(res=>{
                if(res.data.ok){
                    this.categoryTrademarkList = res.data.data;
                }
            })
        },
        openAddDialog(){
            debugger
            this.dialogVisible = true;
            let category3Id = this.currentSelectedCategoryDTO[2]
            categoryTrademarkApi.findNotExistBaseTrademarkListByCategory3Id(category3Id).then(res=>{
                if(res.data.ok){
                    this.categoryNotExistTrademarkList = res.data.data;
                }
            })
        },
        handleSelectionChange(val) {
            let category3Id = this.currentSelectedCategoryDTO[2]
            this.baseCategoryTrademarkDTO.category3Id = category3Id;
            this.baseCategoryTrademarkDTO.trademarkList = val;
        },
        saveCategoryTrademark(){
            categoryTrademarkApi.save(this.baseCategoryTrademarkDTO).then(res=>{
                alert(res.data.message)
                this.dialogVisible = false;
                this.findBaseTrademarkListByCategory3Id();
            })
        } ,
        removeCategoryTrademark(row){
            debugger
            console.log(row)
            let category3Id = this.currentSelectedCategoryDTO[2]
            this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    categoryTrademarkApi.remove(category3Id,row.id).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findBaseTrademarkListByCategory3Id();
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            

        }
    },
    mounted(){
        this.findBaseCatgoryDTOTree();
    }
    
}
</script>
